<template>
  <div class="home-container">
    <PageTitle />
    <PageMenu />

    <div class="main-content">
      <SplitterGroup id="main-operation-area" direction="horizontal">
        <SplitterPanel
          id="resource-bar"
          ref="resourceRef"
          :min-size="0"
          :max-size="15"
          :default-size="13"
          class="bg-white border rounded-xl flex items-center justify-center"
        >
          <div style="height: 100%; width: 100%">
            <ResourceHome />
          </div>
        </SplitterPanel>
        <SplitterResizeHandle id="resource-bar-handle" class="w-2 moveArea" />
        <SplitterPanel id="middle-area" :min-size="20">
          <SplitterGroup id="middle-group" direction="vertical">
            <SplitterPanel
              id="middle-canvas"
              class="bg-white border rounded-xl flex items-center justify-center"
            >
              <div style="height: 100%; width: 100%">
                <CanvasHome />
              </div>
            </SplitterPanel>
            <SplitterResizeHandle id="splitter-group-2-resize-handle-1" class="h-2 moveArea" />
            <SplitterPanel
              id="middle-message"
              ref="messageRef"
              :min-size="0"
              :max-size="35"
              :default-size="15"
              class="bg-white border rounded-xl flex items-center justify-center"
            >
              <div style="height: 100%; width: 100%">
                <MessageHome />
              </div>
            </SplitterPanel>
          </SplitterGroup>
        </SplitterPanel>
        <SplitterResizeHandle id="middle-area-handle" class="w-2 moveArea" />
        <SplitterPanel
          id="attribute-bar"
          ref="attributeRef"
          :min-size="0"
          :max-size="20"
          :default-size="15"
          class="bg-white border rounded-xl flex items-center justify-center"
        >
          <div style="height: 100%; width: 100%">
            <PropertyHome />
          </div>
        </SplitterPanel>
      </SplitterGroup>
    </div>

    <PageBottom />
  </div>
</template>

<script setup lang="ts">
import PageTitle from './pageTitle/PageTitle.vue'
import PageMenu from './pageMenu/PageMenu.vue'
import { SplitterGroup, SplitterPanel, SplitterResizeHandle } from 'reka-ui'
import ResourceHome from './resourceBar/ResourceHome.vue'
import MessageHome from './message/MessageHome.vue'
import PropertyHome from './propertyBar/PropertyHome.vue'
import CanvasHome from './canvas/CanvasHome.vue'
import PageBottom from './pageBottom/PageBottom.vue'
import { useStyleStore } from '@renderer/store/globalStyle/style'
import { storeToRefs } from 'pinia'

const styleStore = useStyleStore()
const { resourceRef, messageRef, attributeRef } = storeToRefs(styleStore)
</script>

<style scoped lang="scss">
.home-container {
  width: 100%;
  height: 100%;

  .main-content {
    width: 100%;
    height: calc(100vh - 82px);
  }

  .bottom-area {
    height: 20px;
    width: 100%;
    background: #d4d4d4;
  }
}
</style>
